import styled from 'styled-components';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Input, Tabs } from 'antd';

const { Search } = Input;

export const G01Search = (props: {
    keywords: string | null,
    category: string,
    categoryPosition?: 'bottom' | 'top',
    onChange: (keywords: string | null, category: string) => Promise<any> | void
}) => {

    const [keywords, setKeywords] = useState<string | null>(null);

    const [loading, setLoading] = useState<boolean>(false);

    const [category, setCategory] = useState<string>('全部');

    useEffect(() => {
        setCategory(props.category);
    }, [props.category]);

    useEffect(() => {
        setKeywords(props.keywords);
    }, [props.keywords]);

    if (props.categoryPosition && props.categoryPosition === 'top') {
        return (
            <Container>
                <CategoryContainer>
                    <Tabs
                        defaultActiveKey="1"
                        size={'small'}
                        style={{ margin: '0' }}
                        items={[{
                            label: '全部',
                            key: 'all',
                            children: ''
                        }, {
                            label: '模型',
                            key: 'model',
                            children: ''
                        }, {
                            label: '数据',
                            key: 'data',
                            children: ''
                        }]}
                    >
                    </Tabs>
                </CategoryContainer>
                <Search value={keywords === null || keywords === '' ? '' : keywords}
                    loading={loading}
                    allowClear={true}
                    onChange={(event) => {
                        setKeywords(event.target.value);
                    }} onSearch={async (key: string) => {
                        await props.onChange(keywords, category);
                    }} onPressEnter={async (event) => {
                        await props.onChange(keywords, category);
                    }}></Search>
            </Container>
        );
    } else {
        return (
            <Container>
                <Search value={keywords === null || keywords === '' ? '' : keywords}
                    loading={loading}
                    allowClear={true}
                    onChange={(event) => {
                        setKeywords(event.target.value);
                    }} onSearch={async (key: string) => {
                        await props.onChange(keywords, category);
                    }} onPressEnter={async (event) => {
                        await props.onChange(keywords, category);
                    }}></Search>
                <CategoryContainer>
                    <Tabs
                        defaultActiveKey="1"
                        size={'small'}
                        style={{ margin: '0' }}
                        items={[{
                            label: '全部',
                            key: 'all',
                            children: ''
                        }, {
                            label: '模型',
                            key: 'model',
                            children: ''
                        }, {
                            label: '数据',
                            key: 'data',
                            children: ''
                        }]}
                    >
                    </Tabs>
                </CategoryContainer>
            </Container>
        );
    }

}

export default G01Search;

const Container = styled.div`
    height: 100%;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const CategoryContainer = styled.div`
    width: 100%;
`;

